﻿@model TWCRM.Models.Home.LoginModel
@{
    Layout = "/Views/Shared/_SubLayout.cshtml";
    ViewBag.Title = "帳戶登入";
}
<script>
    $(document).ready(function () {
        $.fn.keyBinding($('.metro_input_btn'));
        $('.metro_input_contain input:first').focus();

        $('#ValidateCodeImg').unbind('click').bind('click', function () { this.src = '/Tools/GetValidateCodeImage?time' + new Date().getTime(); });

        $('.metro_sub_center_navigate').hide();

        $.fn.metro.onPrevClick = function () {

        };

        var maxCaptionWidth = $.fn.calcMaxWidth($('.metro_input_caption'));
        $('.metro_input_caption').each(function () {
            $(this).width(maxCaptionWidth);
        });
    });

    function confirm() {
        if (!valEmpty($("#UserName"))) {
            showError("使用者名稱是必要欄位不可留白");
            return;
        }
        if (!valEmpty($("#Password"))) {
            showError("密碼是必要欄位不可留白");
            return;
        }
        if (!valEmpty($("#ValidateCode"))) {
            showError("驗證碼是必要欄位不可留白");
            return;
        }
        $.ajax({
            url: "/Tools/GetValidateCode",
            type: "post",
            dataType: "json",
            success: function (result) {
                if (!valEqual($("#ValidateCode"), result)) {
                    showError("驗證碼不正確");
                    return;
                }
                showLoading();
                $('form').submit();
            }
        })
    };
</script>
<div id="Login">
    @using (Html.BeginForm())
    {
        <div class="metro_input_contain">
            <label for="UserName" class="metro_input_caption">
                使用者名稱
            </label>
            @Html.TextBoxFor(m => m.UserName, new { @class = "metro_input_textinput" })
        </div>
        <div class="metro_input_contain">
            <label for="Password" class="metro_input_caption">
                密碼
            </label>
            @Html.PasswordFor(m => m.Password, new { @class = "metro_input_passinput" })
        </div>
        <div class="metro_input_contain">
            <label for="ValidateCode" class="metro_input_caption">
                驗證碼</label>
            <input id="ValidateCode" name="ValidateCode" type="text" value="" class="metro_input_validatecodeinput" />
            <img id="ValidateCodeImg" src="/Tools/GetValidateCodeImage" style="cursor: pointer;
                vertical-align: top" alt="ValidateCode" />
            點擊圖片可以刷新
        </div>
        <div class="metro_input_contain">
            <a class="metro_input_btn" onclick="confirm()">登入</a>
        </div>
    }
</div>
